<template>
	<view>
		<view class="top_view" style="background-image: url('https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/user_top_bg.png');">
			<view class="top_view_zhanwei"></view>
			<view class="top_view_info">
				<view class="top_view_info_left" v-if="false">
					<view class="top_view_info_left_head">
						<image src="" class="top_view_info_left_head_img" mode=""></image>
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/nv.png" class="top_view_info_left_head_icon" mode="" v-if="false"></image>
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/nan.png" class="top_view_info_left_head_icon" mode="" v-else></image>
					</view>
					<view class="">
						<view class="nav_view_info_left_right">
							<view class="name">郭欣</view> 
							<view class="nav_view_info_left_right_bottom">
								<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/lixian.png"  class="nav_view_info_left_right_bottom_left"mode=""></image>
								<view class="nav_view_info_left_right_bottom_min">
									离线
								</view>
								<u-icon name="arrow-right" color="#999" size="10"></u-icon>
							</view>
						</view>
						<view class="nav_view_info_left_right_top">
							副主任医师
						</view>
					</view>
				</view>
				<view class="top_view_info_left" v-else @click="go_choosename">
					<view class="top_view_info_left_head">
						<image :src="personal.avatar?ImgUrl + personal.avatar:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/headerImg.png'" class="top_view_info_left_head_img" mode=""></image>
					</view>
					<view class="nav_view_info_left_right">
						<view v-if="!personal.name" class="name">未登录</view>
						<view v-if="personal.name" class="name">{{personal.name}}</view>
					</view>
				</view>
				<view class="top_view_info_right" @click="go_edituserinfo">
					<view class="top_view_info_right_text">
						编辑资料
					</view>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="order">
				<view class="order_title">
					我的订单
				</view>
				<view class="order_view">
					<view class="order_view_item" @click="hzorders">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/order1.png" class="order_view_item_img" mode=""></image>
						<view class="order_view_item_text">
							会诊订单
						</view>
					</view>
					<view class="order_view_item" @click="serveOrder">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/serveOrder.png" class="order_view_item_img" mode=""></image>
						<view class="order_view_item_text">
							服务订单
						</view>
					</view>
					<view class="order_view_item" @click="scorder">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/order2.png" class="order_view_item_img" mode=""></image>
						<view class="order_view_item_text">
							商城订单
						</view>
					</view>
					<!-- <view class="order_view_item" @click="scorder">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/order3.png" class="order_view_item_img" mode=""></image>
						<view class="order_view_item_text">
							礼物充值
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="order_view1">
			<view class="order_view_item" @click="hzorder">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/usercard2_1.png" class="order_view_item_img" mode=""></image>
				<view class="order_view_item_text">
					用户签到
				</view>
			</view>
			<view class="order_view_item" @click="coupon">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/usercard2_2.png" class="order_view_item_img" mode=""></image>
				<view class="order_view_item_text">
					优惠券
				</view>
			</view>
			<view class="order_view_item" @click="scorders">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/usercard2_3.png" class="order_view_item_img" mode=""></image>
				<view class="order_view_item_text">
					我的评价
				</view>
			</view>
			<view class="order_view_item" @click="hzorders">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/usercard2_4.png" class="order_view_item_img" mode=""></image>
				<view class="order_view_item_text">
					我的问诊
				</view>
			</view>
		</view>
		<view class="list_view">
			<view class="scroll_view_item_title">
				<view class="scroll_view_item_title_left"></view>
				<view class="scroll_view_item_title_right">
					常用工具
				</view>
			</view>
			<view class="list_view_list">
				<template v-for="(item,index) in list">
					<view v-if="item.title!='平台客服'" class="list_view_list_item" @click="list_click(index)">
						<view class="list_view_list_item_icon_view">
							<image :src="item.icon" class="list_view_list_item_icon" mode=""></image>
							<view class="list_view_list_item_icon_num" v-if="index == 0&&shopCarNum!=0">
								{{shopCarNum}}
							</view>
						</view>
						<view class="list_view_list_item_text">
							{{item.title}}
						</view>
					</view>
					<button v-else class="list_view_list_item"
						style="padding: unset;margin: unset;line-height: unset;font-size: unset;border: unset;display: inline;"
						open-type="contact" :plain="true" hover-class="none">
						<view class="list_view_list_item">
							<view class="list_view_list_item_icon_view">
								<image :src="item.icon" class="list_view_list_item_icon" mode=""></image>
								<view class="list_view_list_item_icon_num" v-if="index == 0&&shopCarNum!=0">
									{{shopCarNum}}
								</view>
							</view>
							<view class="list_view_list_item_text">
								{{item.title}}
							</view>
						</view>
					</button>
				</template>
			</view>
		</view>
		<u-popup :show="popup_show" :round="14" @close="popup_close" @open="popup_open" mode="center">
			<view class="kefu">
				<u-icon class="kefu_close" name="close" color="#999999" size="18" @click="popup_close"></u-icon>
				<view class="kefu_title">
					客服电话
				</view>
				<view class="num_phone">
					{{phone||''}}
				</view>
				<view class="kefu_btn" @click="fuzhi">
					复制号码
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { info } from '@/api/login.js';
	import { cart,config } from '@/api/common.js';
	
	export default {
		data() {
			return {
				personal:{},
				list:[
					{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong4.png',
						title:'购物车'
					},{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong5.png',
						title:'我的足迹'
					},{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong6.png',
						title:'赠送记录' 
					},{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong7.png',
						title:'就诊人管理'
					},{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong8.png',
						title:'意见反馈'
					},
					{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong9.png',
						title:'平台客服'
					},
					{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong10.png',
						title:'我的地址'
					},
					
					{
						icon:'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/changyong12.png',
						title:'设置'
					}
				],
				popup_show:false,
				shopCarNum:0,
				phone:'',
			}
		},
		onLoad() {
			config({key:'service_mobile'}).then(res=>{
				// console.log(res,'123');
				this.phone = res.data[0].value;
			})
		},
		onShow() {
			this.getPer();
			this.getShopCarNum();
		},
		computed:{
			ImgUrl(){
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		methods: {
			getShopCarNum(){
				cart().then(res=>{
					if(res.code == 200001){
						this.shopCarNum = res.data.total;
					}
				}).catch(err=>{
					console.log(err,'==err')
				})
			},
			getPer(){
				info().then(res=>{
					if(res.code == 200001){
						this.personal = res.data;
					} else if(res.code == 404001) {
						this.personal = uni.getStorageSync('userinfo')
					}
				})
			},
			hzorders(){
				uni.navigateTo({
					url:'/pages/ConsultationOrder/ConsultationOrder'
				})
			},
			serveOrder() {
				uni.navigateTo({
					url: '/pages/serveOrderPage/serveOrderPage'
				})
			},
			go_edituserinfo(){
				uni.navigateTo({
					url:'/subPages/EditUserInfo/EditUserInfo'
				})
			},
			popup_close(){
				this.popup_show = false
			},
			popup_open(){
				this.popup_show = true
			},
			hzorder(){
				uni.navigateTo({
					url:'/subPages/SignIn/SignIn'
				})
			},
			scorder(){
				uni.navigateTo({
					url:'/pages/ShopOrder/ShopOrder'
				})
			},
			coupon(){
				uni.navigateTo({
					url: '/pages/coupon/coupon'
				})
			},
			scorders(){
				uni.navigateTo({
					url: '/subPages/wodepingjia/wodepingjia'
				})
			},
			go_choosename(){
				if(!personal.avatar){
					uni.navigateTo({
						url:'/pages/ChooseName/ChooseName'
					})
				}
			},
			list_click(num){
				if(num == 0){
					uni.navigateTo({
						url:'/pages/ShoppingCart/ShoppingCart'
					})
				}
				if(num == 1){
					uni.navigateTo({
						url:'/pages/MyFootprint/MyFootprint'
					})
				}
				if(num == 2){
					uni.navigateTo({
						url:'/pages/GiftRecord/GiftRecord'
					})
				}
				if(num == 3){
					uni.navigateTo({
						url:'/pages/NewDrugUsers/NewDrugUsers'
					})
				}
				if(num == 4){
					uni.navigateTo({
						url:'/pages/Feedback/Feedback'
					})
				}
				if(num == 5)this.popup_open()
				if(num == 6){
					uni.navigateTo({
						url:'/pages/MyAddress/MyAddress'
					})
				}
				if(num == 7){
					uni.navigateTo({
						url:'/subPages/SetUp/SetUp'
					})
				}
			},
			fuzhi(){
				let phone = this.phone.toString();
				uni.setClipboardData({
					data:phone,
					success(res) {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				
				})
			},
			go_shouzhi(){
				uni.navigateTo({
					url:'/pages/IncomeAndExpenseDetails/IncomeAndExpenseDetails'
				})
			},
			tixian(){
				uni.navigateTo({
					url:'/pages/Withdrawal/Withdrawal'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F4F4F4;
	}
.top_view{
	width: 100%;
	height: 583rpx;

	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.top_view_zhanwei{
	width: 100%;
	height: 194rpx;
}
.top_view_info{
	display: flex;
	justify-content:space-between;
	align-items: center;
	position: relative;
	z-index: 9999;
}
.top_view_info_left{
	display: flex;
}
.top_view_info_left_head{
	width: 106rpx;
	height: 106rpx;
	position: relative;
}
.top_view_info_left_head_img{
	width: 106rpx;
	height: 106rpx;
	border-radius: 50%;
	background: #ccc;
}
.top_view_info_left_head_icon{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fff;
	border-radius: 50%;
}
.nav_view_info_left_right{
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}
	.nav_view_info_left_right_top{
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		margin-left: 20rpx;
		margin-top: 12rpx;
	}
	.name{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 34rpx;
		font-style: normal;
		font-weight: 400;
		margin-right: 8rpx;
	}
	.nav_view_info_left_right_bottom{
		width: 110rpx;
		height: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 10rpx;
		box-sizing:border-box;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
	}
	.nav_view_info_left_right_bottom_min{
		color: #999;
		font-family: Alibaba PuHuiTi;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		height: 20rpx;
		line-height: 20rpx;
	}
	.nav_view_info_left_right_bottom_left{
		width: 20rpx;
		height: 20rpx;
	}
	.top_view_info_right{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top_view_info_right_text{
		color: #8C97A5;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		margin-top: -2rpx;
	}
	.card{
		width: 100%;
		height: 438rpx;
		/* margin-top: 36rpx; */
		position: relative;
		margin-top: -470rpx;
	}
	.card_img{
		width: 750rpx;
		height: 438rpx;
		/* margin-top: -50rpx; */
		/* width: 660rpx;
		height: 256rpx; */
	}
	.card_jiao{
		width:218rpx;
		height: 150rpx;
		position: absolute;
		right: -38rpx;
		top: 200rpx;
	}
	.card_jiao_img{
		width: 150rpx;
		height: 106rpx;
	}
	.card_jiao_text{
		width: 150rpx;
		position: absolute;
		top: 28rpx;
		left: 0;
		color: #2864F8;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		z-index: 99;
		margin-left: 30rpx;
	}
	.card_text{
		width: 100%;
		height: 256rpx;
		position: absolute;
		top: 120rpx;
		left: 20rpx;
		right: 0;
		padding: 36rpx;
		box-sizing: border-box;
	}
	.card_text_top{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.card_text_top_qianbao{
		width: 40rpx;
		height: 40rpx;
	}
	.card_text_top_text{
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
		margin-left: 8rpx;
	}
	.card_text_bottom{
		display: inline-block;
		padding: 4rpx 16rpx 6rpx 16rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		background: rgba(199, 223, 244, 0.16);
		color: rgba(255, 255, 255, 0.60);
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 12rpx;
	}
	.order{
		margin-top: 54rpx;
		background: #fff;
		border-radius:20rpx ;
		padding:32rpx;
		box-sizing: border-box;
	}
	.order_view{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		margin-top: 46rpx;
	}
	.order_view1{
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		margin: 0 30rpx;
		margin-top: 30rpx;
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.order_view_item{
		/* margin-right: 120rpx; */
	}
	.order_view_item_img{
		width: 72rpx;
		height: 72rpx;
		display: block;
		margin: 0 auto;
	}
	.order_view_item_text{
		color: #444;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		margin-top: 8;
		text-align: center;
	}
	.list_view{
		width: 690rpx;
		padding:30rpx;
		margin: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.scroll_view_item_title{
		width: 100%;
		display: flex;
		align-items: center;
		
	}
	.scroll_view_item_title_left{
		width: 6rpx;
		height: 20rpx;
		background-color: #0165FB;
		margin-right: 10rpx;
	}
	.scroll_view_item_title_right{
		color: #222;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
	}
	.list_view_list{
		display: grid;
		grid-template-columns: repeat(4, 104rpx);
		grid-gap: 40rpx 60rpx;
		margin-top: 28rpx;
	}
	.list_view_list_item{
		width: 130rpx;
		height: 104rpx;
	}
	.list_view_list_item_icon{
		width: 56rpx;
		height: 56rpx;
		
		
	}
	.list_view_list_item_text{
		color: #444;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		width: 100%;
		text-align: center;
		margin-top: 10rpx;
	}
	.kefu{
		width: 478rpx;
		/* height: 332rpx; */
		background-color: #fff;
		border-radius: 28rpx;
		position: relative;
		padding: 20rpx 0 20rpx 20rpx;
		
	}
	.kefu_close{
		position: absolute;
		top: 80rpx;
		right: 28rpx;
	}
	.kefu_title{
		color: #333;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 50rpx;
	}
	.num_phone{
		color: #333;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 40rpx;
		font-weight: 700;
		margin-top: 28rpx;
	}
	.kefu_btn{
		display: table;
		padding: 18rpx 40rpx;
		background-color: #0165FB;
		border-radius: 68rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		margin: 0 auto;
		margin-top: 44rpx;
	}
	.order_title{
		height: 20rpx;
		line-height: 20rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid #0165FB;
	}
	.list_view_list_item_icon_view{
		position: relative;
		width: 56rpx;
		height: 56rpx;
		margin: 0 auto;
	}
	.list_view_list_item_icon_num{
		width: 28rpx;
		height: 28rpx;
		background-color: #E5432E;
		text-align: center;
		line-height: 28rpx;
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 700;
		border-radius: 50%;
		position: absolute;
		top: -5rpx;
		right: -5rpx;
	}
</style>
